<template>
	<view class="category_tab">
		<view class="category_tab_title">
			<view class="title_inner">
				<uni-segmented-control 
				:current="current" 
				:values="items.map(v => v.title)" 
				@clickItem="changeItem"
				style-type="text"
				active-color="#d4237a"
				>
				</uni-segmented-control>
			</view>
			<view class="iconfont iconsearch"></view>
		</view>
		
		<scroll-view
		 @scrolltolower="handleScrolltolower"
		 scroll-y
		 class="category_tab_content"
		>	
		<view class="cats">
			<view class="cate_item"
			v-for="item in vertical"
			:key="item.id"
			>
				<image :src="item.thumb" mode="widthFix"></image>
			</view>
		</view>
			
		</scroll-view>	
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: [
					{title: '最新',order: "new"},
					{title: '热门',order: "hot"}
				],
				id: 0,
				params: {
					limit: 15,
					skip: 0,
					order: 'new'
				},
				vertical: [],
				hasMore: true
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getList()
		},
		methods: {
			changeItem(e) {
				if(this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}else {
					return
				}
				this.params.order = this.items[this.current].order;
				this.params.skip = 0;
				this.vertical = [];
				this.getList()
			},
			async getList() {
				const res = await this.$http({
					url: `/image/v1/vertical/category/${this.id}/vertical`,
					data: this.params
				})
				if(res.res.vertical.length == 0) {
					this.hasMore = false;
					return
				}
				this.vertical = [...this.vertical, ...res.res.vertical]
			},
			handleScrolltolower() {
				if(this.hasMore) {
					this.params.skip += this.params.limit;
					this.getList()
				}else {
					uni.showToast({
						title: "没有更多数据了",
						icon: 'none'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
.category_tab{
  .category_tab_title{
    position: relative;
    .title_inner{
      width: 60%;
      margin: 0 auto;
    }
    .iconsearch{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 5%;
    }
  }
  .category_tab_content{
    height: calc(100vh - 36px);
	.cats {
		display: flex;
		flex-wrap: wrap; 
		.cate_item{
			width: 33.33%;
			border: 5rpx solid #fff;
		}
	}
  }
}

</style>
